<template>
  <div class="container">
    <!-- 视频和试卷区域 -->
    <div class="video-exam-section">
      <!-- 操作视频区域 -->
      <div class="video-section">
        <h2>操作视频:</h2>
        <video controls>
          <source src="your-video.mp4" type="video/mp4">
          您的浏览器不支持 video 标签。
        </video>
        <div class="button-container">
          <button class="btn green" @click="approveVideo">通过</button>
          <button class="btn red" @click="rejectVideo">不通过</button>
        </div>
      </div>
      <!-- 试卷下载区域 -->
      <div class="exam-section">
        <h2>试卷:</h2>
        <a :href="pdfUrl" download>《医用呼吸口罩 呼吸阻力操作规程》试卷.PDF</a>
        <div class="button-container">
          <button class="btn green" @click="approveExam">通过</button>
          <button class="btn red" @click="rejectExam">不通过</button>
        </div>
      </div>
    </div>
    <!-- 授权按钮区域 -->
    <div class="authorization-section">
      <p>请您根据审核结果，决定是否授权？</p>
      <div class="button-container">
        <button class="btn green" @click="grantAuthorization">授权</button>
        <button class="btn red" @click="openRejectionDialog">驳回</button>
      </div>
    </div>

    <!-- 驳回理由对话框 -->
    <dialog id="rejectionDialog">
      <form method="dialog">
        <h2>请输入驳回理由</h2>
        <textarea v-model="rejectionReason" placeholder="在此输入驳回理由..."></textarea>
        <div class="button-container">
          <button class="btn green" @click="submitRejection">提交</button>
          <button class="btn red" @click="closeRejectionDialog">取消</button>
        </div>
      </form>
    </dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rejectionReason: '', // 存储驳回理由
      pdfUrl: 'path-to-your-pdf.pdf' // 更改为实际的PDF文件路径
    };
  },
  methods: {
    approveVideo() {
      console.log('视频已通过');
    },
    rejectVideo() {
      console.log('视频未通过');
      this.openRejectionDialog(); // 打开驳回理由对话框
    },
    approveExam() {
      console.log('试卷已通过');
    },
    rejectExam() {
      console.log('试卷未通过');
      this.openRejectionDialog(); // 打开驳回理由对话框
    },
    grantAuthorization() {
      console.log('已授权');
    },
    revokeAuthorization() {
      console.log('已驳回');
      this.openRejectionDialog(); // 打开驳回理由对话框
    },
    openRejectionDialog() {
      this.rejectionReason = ''; // 清空之前的驳回理由
      document.getElementById('rejectionDialog').showModal();
    },
    closeRejectionDialog() {
      document.getElementById('rejectionDialog').close();
    },
    submitRejection() {
      if (this.rejectionReason.trim() !== '') {
        console.log('驳回理由:', this.rejectionReason);
        // 这里可以添加逻辑，例如发送到服务器或进行其他操作
        this.closeRejectionDialog();
      } else {
        alert('请输入驳回理由');
      }
    }
  }
};
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: center; /* 在主轴上居中按钮 */
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-exam-section {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.video-section, .exam-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  width: 35%; /* 设置视频和试卷区域的宽度 */
}

video {
  width: 100%;
  max-width: 100%; /* 调整视频的最大宽度以适应容器 */
}

.btn {
  margin: 0 10px; /* 在按钮之间添加水平间距 */
  padding: 10px 20px; /* 增加内边距使按钮更宽更高 */
  font-size: 16px; /* 增加字体大小 */
  border-radius: 8px; /* 增加边框圆角 */
  margin: 5px;
}


.green {
  background-color: #44cf64; /* 绿色按钮的背景色 */
  color: white; /* 按钮文字颜色 */
}

.red {
  background-color: #f05464; /* 红色按钮的背景色 */
  color: white; /* 按钮文字颜色 */
}

.authorization-section {
  background-color:rgb(232, 218, 218);
  margin-top: 20px;
  width: 100%;
  text-align: center; /* 使文本居中显示 */
  border-radius: 10px;
  width: 90%;
  padding-top: 10px;
  padding-bottom: 20px;
}

.authorization-section p {
  margin-bottom: 20px; /* 在文本和按钮之间添加一些垂直间距 */
}

.authorization-section .btn {
  margin-top: 10px; /* 在按钮之间添加一些垂直间距 */
}

dialog {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  padding: 20px;
  width: 50%; /* 设置宽度为视口宽度的50% */
  max-width: 600px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}

</style>
